<!--

=========================================================
* Pixel Pro Bootstrap 4 UI Kit
=========================================================

* Product Page: https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit
* Copyright 2019 Themesberg (https://www.themesberg.com)

* Coded by https://themesberg.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

-->
<!DOCTYPE html>
<html lang="en">

<head>
    @@include('./_head.html', {
        "path": "../..",
        "title": "Pixel Documentation - Bootstrap carousels"
    })
</head>

<body>
    <a href="#doc-index" class="btn btn-lg btn-primary btn-block rounded-0 d-lg-none" data-toggle="collapse" data-target="#doc-index" aria-expanded="false" aria-controls="doc-index">
        <svg class="icon fill-white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 17C3 17.5523 3.44772 18 4 18H20C20.5523 18 21 17.5523 21 17V17C21 16.4477 20.5523 16 20 16H4C3.44772 16 3 16.4477 3 17V17ZM3 12C3 12.5523 3.44772 13 4 13H20C20.5523 13 21 12.5523 21 12V12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12V12ZM4 6C3.44772 6 3 6.44772 3 7V7C3 7.55228 3.44772 8 4 8H20C20.5523 8 21 7.55228 21 7V7C21 6.44772 20.5523 6 20 6H4Z" />
        </svg>
        <span class="h6 text-white">Menu</span>
    </a>
    <section class="container-fluid py-4">
        <div class="row">
            @@include('./_docs-sidebar.html', {
                "path": "../..",
                "docs-path": ".."
            })
            <!-- Content -->
            <div class="col-12 col-lg-10">
                <div class="row">
                    <div class="col-xl-10 col-lg-9 px-xl-5 px-lg-3 px-md-3 py-md-5">
                        <div class="border-bottom">
                            <h1>Carousel</h1>
                            <p class="lead text-dark">A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>
                            <a href="https://getbootstrap.com/docs/4.3/components/carousel/" target="_blank" class="btn btn-icon btn-primary mb-3">
                                <span class="btn-inner-icon"><i class="fas fa-info-circle"></i></span>
                                <span class="btn-inner-text">Bootstrap 4 documentation</span>
                            </a>
                        </div>
                        <div class="my-5">
                            <h5 class="mb-3">How it works</h5>
                            <p>The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next
                                controls and indicators.</p>
                            <p>In browsers where the <a href="https://www.w3.org/TR/page-visibility/">Page Visibility
                                    API</a> is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).</p>
                            <!-- Tab -->
                            <div class="alert alert-danger mb-5" role="alert">
                                <h5 class="h6 alert-heading">Bootstrap documentation</h5>
                                <p class="alert-text mb-0">For more detailed information and examples, see the official bootstrap documentation: <a class="alert-link" href="https://getbootstrap.com/docs/4.3/components/carousel/">Bootstrap
                                        carousel</a>.</p>
                            </div>
                            <h5>Slides only</h5>
                            <p>Here’s a carousel with slides only. Note the presence of the <code class="text-danger">.d-block</code> and <code class="text-danger">.w-100</code> on carousel images to prevent browser default image alignment.</p>
                            <div id="example" class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-1" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-1" data-toggle="tab" href="#tab-content-1" role="tab" aria-controls="tab-link-1" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-2" data-toggle="tab" href="#tab-content-2" role="tab" aria-controls="tab-link-2" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent1">
                                            <div class="tab-pane fade show active" id="tab-content-1" role="tabpanel" aria-labelledby="tab-content-1">
                                                <div class="col-md-12">
                                                    <!-- Carousel -->
                                                    <div id="Carousel1" class="carousel slide" data-ride="carousel">
                                                        <div class="carousel-inner">
                                                            <div class="carousel-item active">
                                                                <img src="../../assets/img/carousel/image-1.jpg" class="d-block w-100" alt="slide1">
                                                            </div>
                                                            <div class="carousel-item">
                                                                <img src="../../assets/img/carousel/image-2.jpg" class="d-block w-100" alt="slide2">
                                                            </div>
                                                            <div class="carousel-item">
                                                                <img src="../../assets/img/carousel/image-3.jpg" class="d-block w-100" alt="slide3">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- End of Carousel -->
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-2" role="tabpanel" aria-labelledby="tab-content-2">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Carousel --&gt;
&lt;div id=&quot;Carousel1&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
    &lt;div class=&quot;carousel-inner&quot;&gt;
        &lt;div class=&quot;carousel-item active&quot;&gt;
            &lt;img src=&quot;../../assets/img/carousel/image-1.jpg&quot; class=&quot;d-block w-100&quot; alt=&quot;slide1&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;carousel-item&quot;&gt;
            &lt;img src=&quot;../../assets/img/carousel/image-2.jpg&quot; class=&quot;d-block w-100&quot; alt=&quot;slide2&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;carousel-item&quot;&gt;
            &lt;img src=&quot;../../assets/img/carousel/image-3.jpg&quot; class=&quot;d-block w-100&quot; alt=&quot;slide3&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Carousel --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="controls" class="my-5">
                            <h5 class="mb-3">With controls</h5>
                            <p>Adding in the previous and next controls:</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-2" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-3" data-toggle="tab" href="#tab-content-3" role="tab" aria-controls="tab-link-3" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-4" data-toggle="tab" href="#tab-content-4" role="tab" aria-controls="tab-link-4" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent2">
                                            <div class="tab-pane fade show active" id="tab-content-3" role="tabpanel" aria-labelledby="tab-content-3">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <!-- Carousel -->
                                                        <div id="Carousel2" class="carousel slide" data-ride="carousel">
                                                            <div class="carousel-inner">
                                                                <div class="carousel-item active">
                                                                    <img class="d-block w-100" src="../../assets/img/carousel/image-1.jpg" alt="First slide">
                                                                </div>
                                                                <div class="carousel-item">
                                                                    <img class="d-block w-100" src="../../assets/img/carousel/image-2.jpg" alt="Second slide">
                                                                </div>
                                                                <div class="carousel-item">
                                                                    <img class="d-block w-100" src="../../assets/img/carousel/image-3.jpg" alt="Third slide">
                                                                </div>
                                                            </div>
                                                            <a class="carousel-control-prev" href="#Carousel2" role="button" data-slide="prev">
                                                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                                <span class="sr-only">Previous</span>
                                                            </a>
                                                            <a class="carousel-control-next" href="#Carousel2" role="button" data-slide="next">
                                                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                                <span class="sr-only">Next</span>
                                                            </a>
                                                        </div>
                                                        <!-- End of Carousel -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-4" role="tabpanel" aria-labelledby="tab-content-4">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Carousel --&gt;
&lt;div id=&quot;Carousel2&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
    &lt;div class=&quot;carousel-inner&quot;&gt;
        &lt;div class=&quot;carousel-item active&quot;&gt;
            &lt;img class=&quot;d-block w-100&quot; src=&quot;../../assets/img/carousel/image-1.jpg&quot; alt=&quot;First slide&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;carousel-item&quot;&gt;
            &lt;img class=&quot;d-block w-100&quot; src=&quot;../../assets/img/carousel/image-2.jpg&quot; alt=&quot;Second slide&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;carousel-item&quot;&gt;
            &lt;img class=&quot;d-block w-100&quot; src=&quot;../../assets/img/carousel/image-3.jpg&quot; alt=&quot;Third slide&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#Carousel2&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
        &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class=&quot;carousel-control-next&quot; href=&quot;#Carousel2&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
        &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
    &lt;/a&gt;
&lt;/div&gt;
&lt;!-- End of Carousel --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="indicators" class="my-5">
                            <h5 class="mb-3">With indicators</h5>
                            <p>You can also add the indicators to the carousel, alongside the controls, too.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-3" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-5" data-toggle="tab" href="#tab-content-5" role="tab" aria-controls="tab-link-5" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-6" data-toggle="tab" href="#tab-content-6" role="tab" aria-controls="tab-link-6" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent3">
                                            <div class="tab-pane fade show active" id="tab-content-5" role="tabpanel" aria-labelledby="tab-content-5">
                                                <div class="col-md-12">
                                                    <!-- Carousel -->
                                                    <div id="Carousel3" class="carousel slide" data-ride="carousel">
                                                        <ol class="carousel-indicators">
                                                            <li data-target="#Carousel3" data-slide-to="0" class="active"></li>
                                                            <li data-target="#Carousel3" data-slide-to="1"></li>
                                                            <li data-target="#Carousel3" data-slide-to="2"></li>
                                                        </ol>
                                                        <div class="carousel-inner">
                                                            <div class="carousel-item active">
                                                                <img class="d-block w-100" src="../../assets/img/carousel/image-1.jpg" alt="First slide">
                                                            </div>
                                                            <div class="carousel-item">
                                                                <img class="d-block w-100" src="../../assets/img/carousel/image-2.jpg" alt="Second slide">
                                                            </div>
                                                            <div class="carousel-item">
                                                                <img class="d-block w-100" src="../../assets/img/carousel/image-3.jpg" alt="Third slide">
                                                            </div>
                                                        </div>
                                                        <a class="carousel-control-prev" href="#Carousel3" role="button" data-slide="prev">
                                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                            <span class="sr-only">Previous</span>
                                                        </a>
                                                        <a class="carousel-control-next" href="#Carousel3" role="button" data-slide="next">
                                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                            <span class="sr-only">Next</span>
                                                        </a>
                                                    </div>
                                                    <!-- End of Carousel -->
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-6" role="tabpanel" aria-labelledby="tab-content-6">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Carousel --&gt;
&lt;div id=&quot;Carousel3&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
    &lt;ol class=&quot;carousel-indicators&quot;&gt;
        &lt;li data-target=&quot;#Carousel3&quot; data-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&lt;/li&gt;
        &lt;li data-target=&quot;#Carousel3&quot; data-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
        &lt;li data-target=&quot;#Carousel3&quot; data-slide-to=&quot;2&quot;&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;div class=&quot;carousel-inner&quot;&gt;
        &lt;div class=&quot;carousel-item active&quot;&gt;
        &lt;img class=&quot;d-block w-100&quot; src=&quot;../../assets/img/carousel/image-1.jpg&quot; alt=&quot;First slide&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;carousel-item&quot;&gt;
        &lt;img class=&quot;d-block w-100&quot; src=&quot;../../assets/img/carousel/image-2.jpg&quot; alt=&quot;Second slide&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;carousel-item&quot;&gt;
        &lt;img class=&quot;d-block w-100&quot; src=&quot;../../assets/img/carousel/image-3.jpg&quot; alt=&quot;Third slide&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#Carousel3&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
        &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class=&quot;carousel-control-next&quot; href=&quot;#Carousel3&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
        &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
    &lt;/a&gt;
&lt;/div&gt;
&lt;!-- End of Carousel --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="captions" class="my-5">
                            <h5 class="mb-3">With captions</h5>
                            <p>
                                <p>Add captions to your slides easily with the <code class="text-danger">.carousel-caption</code> element within any <code class="text-danger">.carousel-item</code>. They can be easily hidden on smaller viewports, as shown
                                    below, with optional <a href="https://getbootstrap.com/docs/4.3/utilities/display/">display
                                        utilities</a>. We hide them initially with <code class="text-danger">.d-none</code> and bring them back on medium-sized devices with <code class="text-danger">.d-md-block</code>.</p>
                                <!-- Tab -->
                                <div class="my-5">
                                    <!-- Tab Nav -->
                                    <div class="nav-wrapper position-relative p-0">
                                        <ul class="nav nav-tabs flex-column flex-md-row" id="tab-4" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-7" data-toggle="tab" href="#tab-content-7" role="tab" aria-controls="tab-link-7" aria-selected="true">Result</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-8" data-toggle="tab" href="#tab-content-8" role="tab" aria-controls="tab-link-8" aria-selected="false">Html</a>
                                            </li>
                                            <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                        </ul>
                                    </div>
                                    <!-- End of Tab Nav -->
                                    <div class="card">
                                        <div class="card-body px-0 pb-0">
                                            <div class="tab-content" id="tabcontent4">
                                                <div class="tab-pane fade show active" id="tab-content-7" role="tabpanel" aria-labelledby="tab-content-7">
                                                    <div class="col-md-12">
                                                        <!-- Carousel -->
                                                        <div id="Carousel4" class="carousel slide" data-ride="carousel">
                                                            <ol class="carousel-indicators">
                                                                <li data-target="#Carousel4" data-slide-to="0" class="active"></li>
                                                                <li data-target="#Carousel4" data-slide-to="1"></li>
                                                                <li data-target="#Carousel4" data-slide-to="2"></li>
                                                            </ol>
                                                            <div class="carousel-inner">
                                                                <div class="carousel-item overlay-dark active">
                                                                    <img class="d-block w-100" src="../../assets/img/carousel/image-1.jpg" alt="First slide">
                                                                    <div class="carousel-caption d-none d-md-block">
                                                                        <h5>First Title</h5>
                                                                        <p class="lead">Start your development with a Pixel Design System for Bootstrap 4. It is creative and it features many components that can help you create amazing websites.</p>
                                                                    </div>
                                                                </div>
                                                                <div class="carousel-item overlay-dark">
                                                                    <img class="d-block w-100" src="../../assets/img/carousel/image-2.jpg" alt="Second slide">
                                                                    <div class="carousel-caption d-none d-md-block">
                                                                        <h5>Second Title</h5>
                                                                        <p class="lead">Start your development with a Pixel Design System for Bootstrap 4. It is creative and it features many components that can help you create amazing websites.</p>
                                                                    </div>
                                                                </div>
                                                                <div class="carousel-item overlay-dark">
                                                                    <img class="d-block w-100" src="../../assets/img/carousel/image-3.jpg" alt="Third slide">
                                                                    <div class="carousel-caption d-none d-md-block">
                                                                        <h5>Third Title</h5>
                                                                        <p class="lead">Start your development with a Pixel Design System for Bootstrap 4. It is creative and it features many components that can help you create amazing websites.</p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <a class="carousel-control-prev" href="#Carousel4" role="button" data-slide="prev">
                                                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                                <span class="sr-only">Previous</span>
                                                            </a>
                                                            <a class="carousel-control-next" href="#Carousel4" role="button" data-slide="next">
                                                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                                <span class="sr-only">Next</span>
                                                            </a>
                                                        </div>
                                                        <!-- End of Carousel -->
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" id="tab-content-8" role="tabpanel" aria-labelledby="tab-content-8">
                                                    <div>
                                                        <pre>
                                                        <code class="language-html">
&lt;!-- Carousel --&gt;
&lt;div id=&quot;Carousel4&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
    &lt;ol class=&quot;carousel-indicators&quot;&gt;
        &lt;li data-target=&quot;#Carousel4&quot; data-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&lt;/li&gt;
        &lt;li data-target=&quot;#Carousel4&quot; data-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
        &lt;li data-target=&quot;#Carousel4&quot; data-slide-to=&quot;2&quot;&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;div class=&quot;carousel-inner&quot;&gt;
        &lt;div class=&quot;carousel-item overlay-dark active&quot;&gt;
            &lt;img class=&quot;d-block w-100&quot; src=&quot;../../assets/img/carousel/image-1.jpg&quot; alt=&quot;First slide&quot;&gt;
            &lt;div class=&quot;carousel-caption d-none d-md-block&quot;&gt;
                &lt;h5&gt;First Title&lt;/h5&gt;
                &lt;p class=&quot;lead&quot;&gt;Start your development with a Pixel Design System for Bootstrap 4. It is creative and it features many components that can help you create amazing websites.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;carousel-item overlay-dark&quot;&gt;
            &lt;img class=&quot;d-block w-100&quot; src=&quot;../../assets/img/carousel/image-2.jpg&quot; alt=&quot;Second slide&quot;&gt;
            &lt;div class=&quot;carousel-caption d-none d-md-block&quot;&gt;
                &lt;h5&gt;Second Title&lt;/h5&gt;
                &lt;p class=&quot;lead&quot;&gt;Start your development with a Pixel Design System for Bootstrap 4. It is creative and it features many components that can help you create amazing websites.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;carousel-item overlay-dark&quot;&gt;
            &lt;img class=&quot;d-block w-100&quot; src=&quot;../../assets/img/carousel/image-3.jpg&quot; alt=&quot;Third slide&quot;&gt;
            &lt;div class=&quot;carousel-caption d-none d-md-block&quot;&gt;
                &lt;h5&gt;Third Title&lt;/h5&gt;
                &lt;p class=&quot;lead&quot;&gt;Start your development with a Pixel Design System for Bootstrap 4. It is creative and it features many components that can help you create amazing websites.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#Carousel4&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
        &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class=&quot;carousel-control-next&quot; href=&quot;#Carousel4&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
        &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
    &lt;/a&gt;
&lt;/div&gt;
&lt;!-- End of Carousel --&gt; 
                                                        </code>
                                                    </pre>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- End of Tab -->
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 d-none d-lg-block py-md-1 doc-sidebar border-left">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a href="#example" class="nav-link" data-smooth-scroll>Example</a>
                            </li>
                            <li class="nav-item">
                                <a href="#controls" class="nav-link " data-smooth-scroll>Controls</a>
                            </li>
                            <li class="nav-item">
                                <a href="#indicators" class="nav-link " data-smooth-scroll>Indicators</a>
                            </li>
                            <li class="nav-item">
                                <a href="#captions" class="nav-link " data-smooth-scroll>Captions</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End of content -->
            </div>
        </div>
    </section>
    @@include('./_scripts.html', {
        "path": "../.."
    })
</body>

</html>